<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8"><!-- 字典 国际编码集 gbk gb2312 -->
		<meta name="Keywords" content="77,基础班"><!-- 关键词 -->
		<meta name="Description" content=""><!-- 描述 -->
		<title>作业1</title>
		<style>
			body,ul,p,dl,dd,dt,th,td,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
			ul{list-style:none;}
			a{text-decoration:none;}
			table{border-collapse:collapse;}
			a{color:#fff;}
			body{
				background:url("images/city.jpg") 0 0 fixed;
			}
			#wrap{
				perspective:500px;
				width:400px;
				height:400px;
				margin:120px auto;
			}



			
			#wrap .one{
				transform-style:preserve-3d;
				position:relative;
				transform-origin:200px 200px -200px;
				transform:rotateY(0deg) rotateZ(0deg);
				animation:boom 6.5s linear infinite;
			}
			@keyframes boom{
				/* 0%{
					transform-origin:200px 200px -200px;
					transform:rotateY(0deg) rotateZ(0deg) translateY(100px);
				}
				50%{
					transform-origin:200px 200px -200px;
					transform:rotateY(180deg) rotateZ(180deg) translateY(0px);
				}
				100%{
					transform-origin:200px 200px -200px;
					transform:rotateY(360deg) rotateZ(360deg) translateY(100px);
				} */
				100%{
					transform-origin:200px 200px -200px;
					transform:rotateY(360deg) rotateZ(360deg);
				}
			}
			#wrap .one li{
				width:400px;
				height:400px;
				opacity:.7;
				position:absolute;
				transform:translate(0,0);
			}
			#wrap .one li:nth-child(2){
				transform:translateZ(-400px);
			}
			#wrap .one li:nth-child(3){
				transform-origin:bottom;
				transform:translateY(-400px) rotateX(90deg);
			}
			#wrap .one li:nth-child(4){
				transform-origin:top;
				transform:translateY(400px) rotateX(-90deg);
			}
			#wrap .one li:nth-child(5){
				transform-origin:right;
				transform:translateX(-400px)rotateY(-90deg);
			}
			#wrap .one li:nth-child(6){
				transform-origin:left;
				transform:translateX(400px)rotateY(90deg);
			}







			#wrap .two{
				transform-style:preserve-3d;
				position:relative;
				transform:rotateY(0deg) rotateZ(0deg) translate3d(-500px,0,900px);
				transform-origin:50% 50% -200px;
				animation:run 10s 4s linear forwards;
			}
			@keyframes run{
				0%{
					transform-origin:50% 50% -200px;
					transform:rotateY(0deg) rotateZ(0deg) translate3d(-210px,-100px,900px);
				}
				100%{
					transform-origin:30% 60% -260px;
					transform:rotateY(-100deg) rotateZ(180deg) translate3d(400px,80px,-1200px);
				}
			}
			#wrap .two li{
				width:400px;
				height:400px;
				opacity:.7;
				position:absolute;
				transform:translate(0,0);
			}
			#wrap .two li:nth-child(2){
				transform:translateZ(-400px) rotateY(180deg);
			}
			#wrap .two li:nth-child(3){
				transform-origin:bottom;
				transform:translateY(-400px) rotateX(90deg);
			}
			#wrap .two li:nth-child(4){
				transform-origin:top;
				transform:translateY(400px) rotateX(-90deg);
			}
			#wrap .two li:nth-child(5){
				transform-origin:right;
				transform:translateX(-400px)rotateY(-90deg);
			}
			#wrap .two li:nth-child(6){
				transform-origin:left;
				transform:translateX(400px)rotateY(90deg);
			}






			#wrap .three{
				transform-style:preserve-3d;
				position:relative;
				transform:rotateY(0deg) rotateZ(0deg) translate3d(500px,0,900px);
				transform-origin:50% 50% -200px;
				animation:fly 9s 0s linear forwards;
			}
			@keyframes fly{
				0%{
					transform-origin:40% 50% -200px;
					transform:rotateY(0deg) rotateZ(0deg) translate3d(310px,10px,900px);
				}
				100%{
					transform-origin:30% 70% -320px;
					transform:rotateY(80deg) rotateZ(-120deg) translate3d(-400px,-80px,-1200px);
				}
			}
			#wrap .three li{
				width:400px;
				height:400px;
				opacity:.7;
				position:absolute;
				transform:translate(0,0);
			}
			#wrap .three li:nth-child(1){
				transform:rotateZ(90deg);
			}
			#wrap .three li:nth-child(2){
				transform:translateZ(-400px) rotateY(180deg);
			}
			#wrap .three li:nth-child(3){
				transform-origin:bottom;
				transform:translateY(-400px) rotateX(90deg);
			}
			#wrap .three li:nth-child(4){
				transform-origin:top;
				transform:translateY(400px) rotateX(-90deg);
			}
			#wrap .three li:nth-child(5){
				transform-origin:right;
				transform:translateX(-400px)rotateY(-90deg);
			}
			#wrap .three li:nth-child(6){
				transform-origin:left;
				transform:translateX(400px)rotateY(90deg);
			}
		</style>
	</head>
	<body> 
		<div id="wrap">
			<ul class="two">
				<li><img src="images/8.jpg" alt="前" width="400" height="400"></li>
				<li><img src="images/11.jpg" alt="后" width="400" height="400"></li>
				<li><img src="images/24.jpg" alt="上" width="400" height="400"></li>
				<li><img src="images/22.jpg" alt="下" width="400" height="400"></li>
				<li><img src="images/14.jpg" alt="左" width="400" height="400"></li>
				<li><img src="images/right.jpg" alt="右" width="400" height="400"></li>
			</ul>
			<ul class="three">
				<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552069220419&di=e76846da4580a981608a0940be60f622&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180112%2F5c6b64718f40419dbb683b098dfc9099.gif" alt="前" width="400" height="400"></li>
				<li><img src="images/11.jpg" alt="后" width="400" height="400"></li>
				<li><img src="images/24.jpg" alt="上" width="400" height="400"></li>
				<li><img src="images/14.jpg" alt="下" width="400" height="400"></li>
				<li><img src="images/8.jpg" alt="左" width="400" height="400"></li>
				<li><img src="images/right.jpg" alt="右" width="400" height="400"></li>
			</ul>
			<ul class="one">
				<li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552068824013&di=62f701349c11aae83cc057000b3b6257&imgtype=0&src=http%3A%2F%2Fcdn.k618img.cn%2Fmobilek618%2Fjrtt%2Fttsz%2F201711%2FW020171102396610464937.gif" alt="前" width="400" height="400"></li>
				<li><img src="images/bottom.jpg" alt="后" width="400" height="400"></li>
				<li><img src="images/top.jpg" alt="上" width="400" height="400"></li>
				<li><img src="images/face.jpg" alt="下" width="400" height="400"></li>
				<li><img src="images/left.jpg" alt="左" width="400" height="400"></li>
				<li><img src="images/right.jpg" alt="右" width="400" height="400"></li>
			</ul>
		</div>
	</body>
</html>